<template>
  <div class="radio">
    <fx-card title="基础用法">
      <fx-radio v-model="baseRadio" label="1">备选项1</fx-radio>
      <fx-radio v-model="baseRadio" label="2">备选项2</fx-radio>
      <p>当前选择: {{ baseRadio }}</p>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用">
      <fx-radio v-model="disabledRadio" label="1" disabled>备选项1</fx-radio>
      <fx-radio v-model="disabledRadio" label="2" disabled>备选项2</fx-radio>
      <template #hide>
        <pre v-highlight="disabled"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="带边框">
      <fx-radio v-model="borderRadio" label="1" border>备选项1</fx-radio>
      <fx-radio v-model="borderRadio" label="2" border>备选项2</fx-radio>
      <fx-radio v-model="borderRadio" label="3" border disabled>备选项3</fx-radio>
      <template #hide>
        <pre v-highlight="border"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="按钮排版">
      <ul class="list">
        <li>
          <fx-radio-group v-model="buttonRadio">
            <fx-radio-button label="1">备选项1</fx-radio-button>
            <fx-radio-button label="2">备选项2</fx-radio-button>
            <fx-radio-button label="3">备选项3</fx-radio-button>
            <fx-radio-button label="4">备选项4</fx-radio-button>
          </fx-radio-group>
        </li>
        <li>
          <fx-radio-group v-model="buttonRadio" disabled>
            <fx-radio-button label="1" disabled>备选项1</fx-radio-button>
            <fx-radio-button label="2">备选项2</fx-radio-button>
            <fx-radio-button label="3">备选项3</fx-radio-button>
            <fx-radio-button label="4">备选项4</fx-radio-button>
          </fx-radio-group>
        </li>
      </ul>
      <template #hide>
        <pre v-highlight="button"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="组合单选">
      <fx-radio-group v-model="groupRadio">
        <fx-radio label="1">备选项1</fx-radio>
        <fx-radio label="2">备选项2</fx-radio>
        <fx-radio label="3">备选项3</fx-radio>
        <fx-radio label="4">备选项4</fx-radio>
      </fx-radio-group>
      <template #hide>
        <pre v-highlight="group"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="传入对象">
      <fx-radio-group v-model="objectRadio" value-key="label">
        <fx-radio v-for="item in objectRadioList" :key="item.label" :label="item">
          {{ item.label }}
        </fx-radio>
      </fx-radio-group>
      <br>
      <pre><code>{{ objectRadio }}</code></pre>
      <template #hide>
        <pre v-highlight="object"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="大小">
      <ul class="list">
        <li>
          <fx-radio-group v-model="sizeRadioButton">
            <fx-radio-button label="large">large</fx-radio-button>
            <fx-radio-button label="middle">middle</fx-radio-button>
            <fx-radio-button label="default">default</fx-radio-button>
            <fx-radio-button label="mini">mini</fx-radio-button>
          </fx-radio-group>
        </li>
        <li>
          <fx-radio v-model="sizeRadio" label="1" border :size="sizeRadioButton">备选项1</fx-radio>
          <fx-radio v-model="sizeRadio" label="2" border :size="sizeRadioButton">备选项2</fx-radio>
          <fx-radio v-model="sizeRadio" label="3" border :size="sizeRadioButton">备选项3</fx-radio>
          <fx-radio v-model="sizeRadio" label="4" border :size="sizeRadioButton">备选项4</fx-radio>
        </li>
        <li>
          <fx-radio-group v-model="sizeRadio" :size="sizeRadioButton">
            <fx-radio-button label="1">备选项1</fx-radio-button>
            <fx-radio-button label="2">备选项2</fx-radio-button>
            <fx-radio-button label="3">备选项3</fx-radio-button>
            <fx-radio-button label="4">备选项4</fx-radio-button>
          </fx-radio-group>
        </li>
      </ul>
      <template #hide>
        <pre v-highlight="size"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API radio 属性">
      <fx-table :data="radioApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API radioGroup 属性">
      <fx-table :data="radioGroupApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API radioGroup 方法">
      <fx-table :data="radioGroupMethod">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="callback" label="回调参数"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API radioButton 属性">
      <fx-table :data="radioButtonApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { defaultList } from '@/assets/menuList'

const radioApi = [
  { name: 'modelValue / v-model', directions: '绑定值', type: 'Number | String | Object | Boolean' },
  { name: 'label', directions: 'Radio 的 value', type: 'Number | String | Object | Boolean' },
  { name: 'disabled', directions: '是否禁用', type: 'Boolean', default: 'false' },
  { name: 'size', directions: '大小尺寸（仅在border下作用）', type: 'Boolean', default: 'false' }
]

const radioGroupApi = [
  { name: 'modelValue / v-model', directions: '绑定值', type: 'Number | String | Object | Boolean' },
  { name: 'disabled', directions: '是否禁用', type: 'Boolean', default: 'false' },
  { name: 'size', directions: '大小尺寸（仅在border下作用）', type: 'Boolean', default: 'false' },
  { name: 'valueKey', directions: '对象属性时，指定唯一绑定值key', type: 'String' }
]

const radioGroupMethod = [
  { name: 'change', directions: '绑定值变化时触发的事件', callback: '当前选中Radio值' }
]

const radioButtonApi = [
  { name: 'label', directions: 'Radio 的 value', type: 'Number | String | Object | Boolean' },
  { name: 'disabled', directions: '是否禁用', type: 'Boolean', default: 'false' },
  { name: 'size', directions: '大小尺寸', type: 'Boolean', default: 'false' }
]

const baseRadio = ref<string>('1')
const disabledRadio = ref<string>('1')
const borderRadio = ref<string>('1')
const sizeRadio = ref<string>('1')
const groupRadio = ref<string>('1')
const buttonRadio = ref<string>('1')
const objectRadio = ref({})
const objectRadioList = defaultList
const sizeRadioButton = ref<string>('large')

const base = `<fx-radio v-model="baseRadio" label="1">备选项1</fx-radio>
<fx-radio v-model="baseRadio" label="2">备选项2</fx-radio>
<p>当前选择: {{ baseRadio }}</p>`
const disabled = `<fx-radio v-model="disabledRadio" label="1" disabled>备选项1</fx-radio>
<fx-radio v-model="disabledRadio" label="2" disabled>备选项2</fx-radio>`
const border = `<fx-radio v-model="borderRadio" label="1" border>备选项1</fx-radio>
<fx-radio v-model="borderRadio" label="2" border>备选项2</fx-radio>
<fx-radio v-model="borderRadio" label="3" border disabled>备选项3</fx-radio>`
const size = `<ul class="list">
  <li>
    <fx-radio-group v-model="sizeRadioButton">
      <fx-radio-button label="large">large</fx-radio-button>
      <fx-radio-button label="middle">middle</fx-radio-button>
      <fx-radio-button label="default">default</fx-radio-button>
      <fx-radio-button label="mini">mini</fx-radio-button>
    </fx-radio-group>
  </li>
  <li>
    <fx-radio v-model="sizeRadio" label="1" border :size="sizeRadioButton">备选项1</fx-radio>
    <fx-radio v-model="sizeRadio" label="2" border :size="sizeRadioButton">备选项2</fx-radio>
    <fx-radio v-model="sizeRadio" label="3" border :size="sizeRadioButton">备选项3</fx-radio>
    <fx-radio v-model="sizeRadio" label="4" border :size="sizeRadioButton">备选项4</fx-radio>
  </li>
  <li>
    <fx-radio-group v-model="buttonRadio" :size="sizeRadioButton">
      <fx-radio-button label="1">备选项1</fx-radio-button>
      <fx-radio-button label="2">备选项2</fx-radio-button>
      <fx-radio-button label="3">备选项3</fx-radio-button>
      <fx-radio-button label="4">备选项4</fx-radio-button>
    </fx-radio-group>
  </li>
</ul>`
const group = `<fx-radio-group v-model="groupRadio">
  <fx-radio label="1">备选项1</fx-radio>
  <fx-radio label="2">备选项2</fx-radio>
  <fx-radio label="3">备选项3</fx-radio>
  <fx-radio label="4">备选项4</fx-radio>
</fx-radio-group>`
const button = `<fx-radio-group v-model="buttonRadio">
  <fx-radio-button label="1" disabled>备选项1</fx-radio-button>
  <fx-radio-button label="2">备选项2</fx-radio-button>
  <fx-radio-button label="3">备选项3</fx-radio-button>
  <fx-radio-button label="4">备选项4</fx-radio-button>
</fx-radio-group>`
const object = `<fx-radio-group v-model="objectRadio" value-key="label">
  <fx-radio v-for="item in objectRadioList" :key="item.label" :label="item">
    {{ item.label }}
  </fx-radio>
</fx-radio-group>
<br>
{{ objectRadio }}
export default defineComponent({
    setup() {
        const objectRadio = ref({})
        const objectRadioList = [
          { value: '蒙奇·D·路飞', role: '船长', label: '蒙奇·D·路飞' },
          { value: '罗罗诺亚·索隆', role: '剑士', label: '罗罗诺亚·索隆' },
          { value: '文斯莫克·山治', role: '厨师', label: '文斯莫克·山治' },
          { value: '托尼托尼·乔巴', role: '医生', label: '托尼托尼·乔巴', disabled: true },
          { value: '娜美', role: '航海士', label: '娜美', disabled: true },
          { value: '乌索普', role: '狙击手', label: '乌索普' },
          { value: '妮可·罗宾', role: '考古学家', label: '妮可·罗宾', disabled: true },
          { value: '弗兰奇', role: '船匠', label: '弗兰奇' },
          { value: '布鲁克', role: '音乐家', label: '布鲁克' },
          { value: '甚平', role: '舵手', label: '甚平' }
        ]
    }
})`
</script>

<style scoped lang="scss">
.radio {
  .list {
    > li {
      padding-bottom: 10px;
    }
  }
}
</style>
